<!-- 楼层管理 -->

<template>
  <a-drawer
    :title="buildDetail.build_name + '-楼层管理'"
    :visible="visible"
    :destroyOnClose="true"
    :width="700"
    @close="closeModal"
  >
    <section>
      <a-table
        :dataSource="list"
        :columns="columns"
        :pagination="pagination"
        :loading="tableLoading"
        @change="handleTableChange"
        rowKey="id"
        bordered
        size="small"
      >
        <template #title>
          <a-row type="flex" align="middle">
            <a-col flex="auto"> 楼层列表</a-col>
            <a-col flex="200px" class="text-right">
              <a-button type="primary" @click="layerEdit()">
                <template #icon>
                  <PlusOutlined />
                </template>
                添加楼层
              </a-button>
            </a-col>
          </a-row>
        </template>
        <template #headerCell="{ column }">
          <template v-if="column.key === 'layer_number'">
            <span class="mr-10">楼层数字编号</span>
            <a-tooltip
              title="用于楼层列表进行排序，以及未来智能设备等第三方对接使用。地下室使用负数表示"
            >
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
        </template>
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'three_dimensional_file'">
            <a-space v-if="text">
              <a-button type="primary" @click="check3DView(record, 'preview')"
                >查看</a-button
              >
              <a-button @click="check3DView(record, 'edit')">编辑</a-button>
            </a-space>
            <span v-else>--</span>
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="layerEdit(record)">编辑</a-button>
            <a-button type="link" danger @click="layerRemove(record)"
              >删除</a-button
            >
          </template>
        </template>
      </a-table>
    </section>
    <layer-edit
      :visible="layerEditVisible"
      :content="layerContent"
      @cancel="layerEditVisible = false"
      @success="handleLayerEditSuccess"
    />
  </a-drawer>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
} from "@vue/runtime-core";
import { PlusOutlined, QuestionCircleOutlined } from "@ant-design/icons-vue";
import request from "../../../../common/utils/request";
import LayerEdit from "./LayerEdit.vue";
import utils from "../../../../common/utils/utils";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "layerList",
  components: { PlusOutlined, QuestionCircleOutlined, LayerEdit },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    buildId: {
      type: Number,
      default: 0,
    },
    villageId: {
      type: Number,
      default: 0,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      buildDetail: {},
      page: 1,
      pageSize: 10,
      total: 0,
      list: [],
      layerContent: {},
      layerEditVisible: false,
      tableLoading: false,
    });

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
    }));
    const handleTableChange = (pager) => {
      state.page = pager.current;
      state.limit = pager.pageSize;
    };

    const getList = () => {
      state.tableLoading = true;
      request
        .get("/village", "/project/layer/all", {
          build_id: state.buildDetail.id,
        })
        .then((res) => {
          let data = res.list;
          state.list = data;
          state.total = data.length;
          state.tableLoading = false;
        });
    };

    const getBuildDetail = () => {
      request
        .get("/village", "/project/build/get", {
          id: props.buildId,
          village_id: props.villageId,
        })
        .then((res) => {
          state.buildDetail = res.detail;
          getList();
        });
    };

    // 编辑楼层
    const layerEdit = (content) => {
      state.layerContent = content || {};
      state.layerContent.villageId = state.buildDetail.village_id;
      state.layerContent.buildId = state.buildDetail.id;
      state.layerEditVisible = true;
    };
    const handleLayerEditSuccess = () => {
      state.layerEditVisible = false;
      getList();
    };
    const check3DView = (record, type) => {
      window.open(
        `${location.origin + location.pathname}#/main/3d/layer?layerId=${
          record.id
        }&buildId=${props.buildId}&villageId=${props.villageId}&type=${type}`
      );
    };

    // 删除楼层
    const layerRemove = (record) => {
      utils.modalConfirm({
        content: `确认删除楼层"${record.layer_name}"？`,
        centered: true,
        onOk: () => {
          request
            .del("/village", "/project/layer", {
              id: record.id,
              village_id: state.buildDetail.village_id,
              needMsg: true,
            })
            .then((res) => {
              getList();
              message.success(res.msg || "删除成功");
            });
        },
      });
    };

    const closeModal = () => {
      emit("cancel");
    };

    const columns = [
      {
        dataIndex: "layer_number",
        key: "layer_number",
        width: 160,
      },
      { title: "楼层名称", dataIndex: "layer_name" },
      {
        title: "楼层可视化",
        dataIndex: "three_dimensional_file",
        key: "three_dimensional_file",
        width: 160,
      },
      {
        title: "操作",
        dataIndex: "id",
        key: "action",
        fixed: "right",
        width: 160,
      },
    ];

    const reset = () => {
      state.tableLoading = false;
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getBuildDetail();
        } else {
          reset();
        }
      }
    );

    return {
      ...toRefs(state),
      pagination,
      columns,
      handleTableChange,
      layerEdit,
      handleLayerEditSuccess,
      layerRemove,
      check3DView,
      closeModal,
    };
  },
});
</script>
